Interactive Presentation

Using Observable

Oliver

Interactive Visualizations

My summary from 11/Feb/2023

  • Interactive visualizations are best made with html.

  • Presentation Tools

    • Powerpoint and google-docs do not consistently allow to embed HTML

    • Quatro

      • Can an embed HTML nicely

      • Nice presentation with https://revealjs.com (pdf and standallone html OK)

    • Other

  • Interactivity

    • html_widgets (not all widgets work)

    • Shiny (needs server)

    • Observable.js (nice interactive alternative) not yet 100% sure what happens

Observable (Development)

Workflow

Observable.js is java script library for interactivity. Best way is to develop them on a website called

You can then include the code via copy&paste into the cell (or) do it differently.

Observable (Resources)

Observable

Is like a reactive framework. Variables listen to their changes and can be used before they are defined. It can be easily used with quatro (also to make interactive slides).

The cool thing is that you can include functions from the community very easily. The following code downloads the summary-table

import { SummaryTable } from "@observablehq/summary-table"

Importing the data and visualizing

This is the data in R:

   x   y
1 22 131
2 41 139
3 52 128

To use the data in observable

  ojs_define(datt = dat)
  #Ignore the error msg
  # To write data which can be used later in obersvableHQ
  #write.csv2(american.woman, "~/Downloads/data.csv", row.names = FALSE)

Importing from the cloud

It has been uploaded a while ago into ObservableHQ and can be used from there via the following command

import {american1Woman} from "50b32fe191bd30ce"

Click on the car to filter. The right table will update

To create a dynamic variable you can use viewof and a imput widgets, see.

viewof table = Inputs.table(american1Woman)
SummaryTable(table)

Plot